<template>
	<view class="edit">
		<toSafe></toSafe>
	<!-- 导航栏 -->
	<uni-nav-bar @clickLeft="HandleLeft" :fixed="true" leftIcon="left" :border="false" backgroundColor="transparent" :title="'设置'"></uni-nav-bar>
		<view class="messgaeBox">
			<view class="item">
				<text class="big">头像</text>
				<div class="imgEdit">
					<image src="../../punlic/image/headerIcon.png" mode="" class="img"></image>
					<!-- <uni-icons type="right" size="20" color="#818181"></uni-icons> -->
				</div>
			</view>
			<view class="item">
				<text class="big">昵称</text>
				<div class="imgEdit">
					<text>{{userInfo.nickName}}</text>
					<!-- <uni-icons type="right" size="20" color="#818181"></uni-icons> -->
				</div>
			</view>
			<view class="item">
				<text class="big">邮箱</text>
				<div class="imgEdit">
					<text>{{userInfo.email}}</text>
					<!-- <uni-icons type="right" size="20" color="#818181"></uni-icons> -->
				</div>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import toSafe from '@/compoents/top-safe.vue'
	import { UserInfo } from '@/api/User.js'
	import {reactive} from 'vue'
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	interface UserType {
		nickName: string,
		email: string
	}
	let userInfo = reactive<UserType>({
		nickName: "",
		email: ""
	})
	// 获取个人信息
	const getInfo = async() => {
		let res:any = await UserInfo();
		userInfo.nickName = res.user?.userName;
		userInfo.email = res.user?.email;
	}
	getInfo();
</script>

<style lang="less">
	@flex: {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.edit {
		width: 100%;
		height: 100%;
		padding: 0 40rpx;

		.messgaeBox {
			width: 100%;
			height: auto;

			.item {
				padding: 40rpx 10rpx;
				border-bottom: 1rpx solid #e6e6e6;
				@flex();

				.big {
					font-size: 30rpx;
					font-weight: 600;
				}

				.imgEdit {
					display: flex;
					justify-content: space-around;
					align-items: center;
					.img{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin: 0 10rpx;
					}
				}
			}
		}
	}
</style>